<template>
    <div>
        <div
            class="product-box"
            v-for="(product, index) in props.productList"
            :key="index"
            @click="linkToDetail(product)"
        >
            <img class="img" :src="product.img" alt="" />
            <div class="detail">
                <div class="mt-2">
                    <p class="title text-sm">{{ product.name }}</p>
                    <p class="mt-2 line-clamp-1 text-ellipsis text-gray-400 text-xs">
                        {{ product.description }}
                    </p>
                </div>
                <div class="bottom mb-2">
                    <p class="price text-base">¥{{ product.price }}</p>

                    <IconFont
                        name="cart"
                        color="#d81e06"
                        size="16px"
                        @click="addCart(product)"
                    ></IconFont>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'

interface Iproduct {
    id: number
    img: string
    name: string
    price: number
    description: string
}

interface IproductInfo {
    productList: Iproduct[]
}
const props = defineProps<IproductInfo>()

const linkToDetail = (product: Iproduct) => {
    Taro.navigateTo({
        url: `/pages/product/detail/index?id=${product.id}`
    })
}

const addCart = (product: Iproduct) => {
    console.log('加入购物车', product)
}
</script>

<style lang="less">
@primary-color: #d81e06;

.product-box {
    margin: 32px auto;
    display: flex;
    width: 686px;
    border-radius: 16px;
    background-color: #fff;
    overflow: hidden;

    .img {
        width: 240px;
        height: 240px;
        border-radius: 16px;
    }

    .detail {
        margin-left: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .price {
            color: @primary-color;
        }

        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>
